<template>
  <div class="content-wrapper">
    <draggable v-model="data" :options="dragItemOptions" @end="onEnd">
      <transition-group>
        <div
          class="content"
          v-for="(item, key) in data"
          :key="(item.id || item.code || item.name) + key"
        >
          <div class="list">
            <span
              v-if="item.children && item.children.length && !item.isShowChild"
              class="item-icon show-more-btn"
              @click="showMore(item)"
              ><a-icon type="caret-right"
            /></span>
            <span
              v-if="item.children && item.children.length && item.isShowChild"
              class="item-icon show-more-btn"
              @click="showMore(item)"
              ><a-icon type="caret-down"
            /></span>
            <span
              v-if="!item.children || !item.children.length"
              class="item-icon"
              ><a-icon type="file"
            /></span>

            <span class="code" :title="item.code">{{ item.code }}</span>
            <span class="name" :title="item.name">{{ item.name }}</span>

            <div class="btns">
              <span class="edit" @click.stop="($event) => vm.edit($event, item)"
                ><a-icon type="edit"
              /></span>
              <span @click.stop="($event) => vm.add($event, item)"
                ><a-icon type="plus"
              /></span>
            </div>
          </div>

          <template v-if="item.children && item.isShowChild">
            <tree-content :recordsData="item.children" :vm="vm"></tree-content>
          </template>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import Draggable from "vuedraggable";

@Component({
  name: "TreeContent",
  components: {
    Draggable,
  },
})
export default class TreeContent extends Vue {
  @Prop({
    default: () => [],
  })
  recordsData!: any[];

  @Prop()
  vm!: any;

  showMore(item) {
    this.$set(item, "isShowChild", !item.isShowChild);
  }

  dragItemOptions: any = {
    ghostClass: 'ghostClass',
    fallbackClass: 'dragClass',
  }

  /**
   * 字段拖拽排序结束
   */
  onEnd() {
    console.log('end==>',this.data)
  }

  data: any[] = [];

  @Watch("recordsData")
  onRecordsDataChange() {
    this.data = this.recordsData;
  }

  created() {
    this.data = this.recordsData;
  }
}
</script>
<style lang="less" scoped>
.content {
  margin-left: 12px;
  .list {
    display: flex;
    border-radius: 1px;
    width: 400px;
    margin-left: 12px;
    padding-left: 12px;
    padding-right: 12px;
    height: 28px;
    line-height: 28px;
    &:hover {
      background-color: #f4f4f4;
      .btns {
        display: inline-block;
      }
    }
    .code {
      display: inline-block;
      width: 120px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-right: 8px;
    }
    .name {
      display: inline-block;
      width: 180px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-right: 8px;
    }
    .btns {
      display: none;
      font-size: 12px;
      color: #4c80ff;
      flex: 1;
      .edit {
        margin-right: 8px;
      }
      span {
        cursor: pointer;
      }
    }
  }
}
</style>
